<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch">
      <x-filter-item :label="$t('config.agreement.name')">
        <el-input
          v-model="searchParams.agreementName"
          :placeholder="$t('config.agreement.namePlaceholder')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('config.agreement.code')">
        <el-input
          v-model="searchParams.agreementCode"
          :placeholder="$t('config.agreement.codePlaceholder')"
          clearable
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="$t('config.agreement.type')">
        <x-select
          :placeholder="$t('config.agreement.typePlaceholder')"
          v-model="searchParams.agreementType"
          :options="dictOptions['tc_agreement.agreement_type']"
          style="width: 100%"
        ></x-select>
      </x-filter-item>
    </x-filter>
    <!--数据面板-->
    <x-data>
      <!--数据面板按钮插糟-->
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button type="primary" v-hasPermi="['srm:agreement:add']" @click="handleAdd" :icon="buttonIcons('add')">
              {{ $t('common.add') }}</el-button
            >
            <el-button
              type="danger"
              v-hasPermi="['srm:agreement:delete']"
              @click="handleDeleteBtn"
              :icon="buttonIcons('delete')"
            >
              {{ $t('common.batchDelete') }}
            </el-button>
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <!-- 数据表格 -->
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <el-switch
              v-if="item.prop === 'state'"
              :value="scope.row[item.prop]"
              active-color="#4474F6"
              inactive-color="#A5A9B2"
              @change="handleChangeState(scope.row[item.prop], scope.row.id)"
              :disabled="!checkBntPermi('srm:agreement:state')"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <span v-else-if="item.prop === 'agreementType'">
              {{ getDictLabel(dictOptions['tc_agreement.agreement_type'], scope.row[item.prop]) }}</span
            >
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" :label="$t('common.opeartion')" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="actions"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <agreement-dialog ref="agreementComponents" :dict-options="dictOptions" @handleSuccess="loadData()" />
  </x-page>
</template>
<script>
  import { selectDictLabel, TableListMixin, QueryDictMixin, PermissionsMixin, buttonIcons } from '@package/utils'
  import { columns, actions } from '../config/agreement.js'
  import {
    apiPutAgreementEnble,
    apiPostAgreementDisable,
    apiDeleteAgreement,
    apiGetAgreementDetail,
    listUrl
  } from '../api/agreement.js'
  import { EnumApiCode } from '../../../../../../globalEnum'
  import AgreementDialog from '../components/agreementDialog.vue'

  export default {
    name: 'Agreement',
    components: { AgreementDialog },
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns,
        actions,
        listUrl,
        searchParams: {
          agreementName: '',
          agreementCode: '',
          agreementType: ''
        },
        dictKeys: ['system.state'],
        srmDictKeys: ['tc_agreement.agreement_type']
      }
    },
    methods: {
      buttonIcons,
      selectDictLabel,
      getDictLabel(options, value) {
        return this.selectDictLabel(options, value)
      },
      async handleChangeState(state, id) {
        const { code, msg } = state === 1 ? await apiPostAgreementDisable(id) : await apiPutAgreementEnble(id)
        if (code === EnumApiCode.Success) {
          this.$message.success(this.$t('system.user.successTips'))
          this.loadData()
        } else {
          this.$message.error(msg)
        }
      },
      handleAdd() {
        this.$refs.agreementComponents.handleOpen()
      },
      handleActions({ key, data }) {
        switch (key) {
          case 'delete':
            this.$confirm('确定删除该数据, 是否继续?', '提示', {
              confirmButtonText: this.$t('common.sure'),
              cancelButtonText: this.$t('common.cancel')
            })
              .then((confirm) => {
                this.handleDelete(data.id)
              })
              .catch((cancel) => {})
            break
          case 'edit':
            apiGetAgreementDetail(data.id).then(({ data }) => {
              this.$refs.agreementComponents.handleOpen(data)
            })
            break
          default:
            break
        }
      },
      /**
       * 批量删除
       *
       */
      handleDeleteBtn() {
        if (this.selectionRows.length == 0) {
          this.$message.error('请选择至少一条数据进行操作')
        } else {
          const ids = this.selectionRows
            .map((item) => {
              return item.id
            })
            .toString()
          this.$confirm('确认批量删除数据吗?', '提示', {
            confirmButtonText: this.$t('common.sure'),
            cancelButtonText: this.$t('common.cancel')
          })
            .then((confirm) => {
              this.handleDelete(ids)
            })
            .catch((cancel) => {})
        }
      },
      /**
       * 删除接口
       *
       */
      handleDelete(infoId) {
        apiDeleteAgreement(infoId).then((res) => {
          if (res.code === EnumApiCode.Success) {
            this.$message.success(this.$t('common.deleteSuccess'))
          } else {
            this.$message.error(res.msg)
          }
          this.loadData()
        })
      }
    }
  }
</script>
